<template>
<view>
	<view class="order">
		<u-form :model="form">
				<view class="c1">
					<text style="margin-left: -15rpx;">国画家</text>
					<input type="text" value="" class="inp" style="width: 70%;margin-left: 65rpx;" placeholder="请输入姓名" v-model="form.name"/>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约价格</text>
					<input type="text" value="" style="width: 70%;margin-left: 45rpx;" class="inp" placeholder="请输入价格" v-model="form.price"/>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约开始时间</text>
					<input type="text" value="" style="width: 60%;" placeholder="- -:- -:- -" class="inp" v-model="form.startTime"/>
					<image src="../../../static/时间选择.png" mode="" @click="show = true" style="margin-top: 40rpx;" class="icon"></image>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约结束时间</text>
					<input type="text" value="" style="width: 60%;" placeholder="- -:- -:- -" class="inp" v-model="form.endTime"/>
					<image src="../../../static/时间选择.png" mode="" @click="show = true" style="margin-top: 40rpx;" class="icon"></image>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约具体地址</text>
					<input type="text" value="" placeholder="请输入地址" class="inp" v-model="form.address"/>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约联系人</text>
					<input type="text" value="" style="margin-left: 25rpx;" placeholder="请输入联系人" class="inp" v-model="form.contact"/>
				</view>
				<view class="c1">
					<text style="margin-left: -15rpx;">邀约联系电话</text>
					<input type="text" value="" placeholder="请输入电话号码" class="inp" v-model="form.telephone"/>
				</view>
		</u-form>
		<view class="btn"  v-if="isShow == false" @click="pay">
			<text>支付</text>
			<u-loading mode="circle" class="loading" v-if="isLoading"></u-loading>
		</view>
	</view>
	
	<!-- 日期组件 -->
	<view>
		<u-calendar v-model="show" :mode="mode" active-bg-color="#fa3534" btn-type="error"></u-calendar>
	</view>
	
<!-- 确定和取消按钮 -->
	 <view v-if="isShow" @click="goToPay" class="confirm">确定</view>
	 <view v-if="isShow" class="cancel">取消</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			isShow: false,
			show: false,
			mode: 'date',
			form: {
				name: '',
				price: '',
				startTime: '',
				endTime:'',
				address:'',
				contact:'',
				telephone:''
			},
			checkboxList: [
				{
					name: '苹果',
					checked: false,
					disabled: false
				},
				{
					name: '雪梨',
					checked: false,
					disabled: false
				},
				{
					name: '柠檬',
					checked: false,
					disabled: false
				}
			],
			radioList: [
				{
					name: '鲜甜',
					disabled: false
				},
				{
					name: '麻辣',
					disabled: false
				}
			],
			radio: '',
			switchVal: false
		};
	},
	methods:{
		goToPay(){
			uni.navigateTo({
				url:'../pay/pay'
			})
		},
		pay(){
			this.isLoading = true
			setTimeout(() => {
				this.isShow = true
				this.isLoading = true
			},1000)
		}
	}
}
</script>

<style lang="scss" scoped>
  .c1 {
	  display: flex;
	  justify-content: space-around;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 2rpx solid #F3F3F3;
		width: 90%;
		margin:0 5% 0 5%;
  }
	 
	 text {
		 font-size: 28rpx;
		 font-weight: 700;
		 color: #262626;
	 }
	 
	 .c1 .inp {
		width: 70%;
		margin-top: 40rpx;
	 }
	 
	.btn {
		width: 90%;
		margin: 5%;
		height: 80rpx;
		font-size: 24rpx;
		background-color: #c6100e;
		border-radius: 120rpx;
		text-align: center;
	}
	
	.btn text {
		color: #FFFFFF;
		line-height: 80rpx;
	}
	
	.icon {
		width: 36rpx;
		height: 36rpx;
	}
	.confirm {
		width: 90%;
		margin: 5%;
		height: 80rpx;
		font-size: 24rpx;
		background-color: #c6100e;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		border-radius: 120rpx;
		font-weight: 700;
	}
	
	.cancel {
		width: 90%;
		margin: 5%;
		height: 80rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		line-height: 80rpx;
		border-radius: 120rpx;
		font-weight: 700;
	}
	
	.loading {
		margin-left: 30rpx;
	}
</style>
